<template>
  <el-dialog
    :model-value="modelValue"
    @update:model-value="changeModelValue"
    draggable
    :title="title"
    width="650px"
    :close-on-click-modal="false"
    @close="resetFields"
  >
    <el-form ref="formInstance" :disabled="isDetail" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="商品名称" prop="name">
        <el-input
          v-model="form.name"
          maxlength="30"
          show-word-limit
          style="width: 100%"
          placeholder="请输入商品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品类型" prop="typeName">
        <el-input
          v-model="form.typeName"
          @click="openType"
          readonly
          style="width: 100%"
          placeholder="点击选择商品类型"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="!props.info.id" label="商品数量" prop="total">
        <el-input
          type="number"
          v-model="form.total"
          style="width: 100%"
          placeholder="请输入商品数量"
          min="1"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品条形码" prop="code">
        <el-input
          v-model="form.code"
          style="width: 100%"
          maxlength="50"
          show-word-limit
          placeholder="请输入商品条形码"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品规格" prop="sku">
        <el-input
          v-model="form.sku"
          style="width: 100%"
          placeholder="请输入商品规格"
          maxlength="30"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item v-if="isDetail" label="出库状态" prop="isExport">
        <el-select v-model="form.isExport" disabled placeholder="请选择是否出库" style="width: 100%">
          <el-option label="已出库" value="1"></el-option>
          <el-option label="未出库" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="isDetail" label="快递单号" prop="transfer">
        <el-input v-model="form.transfer" disabled style="width: 100%" placeholder="请输入快递单号"></el-input>
      </el-form-item>
      <el-form-item v-if="isDetail && form.exportTime" label="创建时间" prop="createTime">
        <el-input
          :modelValue="formattedDateTime(form.createTime)"
          disabled
          style="width: 100%"
          placeholder="请输入创建时间"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="isDetail && form.exportTime" label="出库时间" prop="exportTime">
        <el-input
          :modelValue="formattedDateTime(form.exportTime)"
          disabled
          style="width: 100%"
          placeholder="请输入出库时间"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品备注" prop="memo">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2 }"
          v-model="form.memo"
          style="width: 100%"
          placeholder="请输入商品备注"
          maxlength="300"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <typeTable v-model="typeFlag" @callback="confirmType" :rowId="form.typeId" />
    <template #footer>
      <div v-if="!isDetail" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button :loading="loading" :icon="Finished" type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { computed, ref, onMounted, watch, nextTick } from 'vue';
  import { Finished } from '@element-plus/icons-vue';
  import typeTable from './typeTable.vue';
  import { addShop, updateShop } from '@/server/shop';
  import { ElMessage } from 'element-plus';
  import { useDateFomatter } from '@/hooks/formatter';
  const { formattedDateTime } = useDateFomatter();

  const props = defineProps({
    info: {
      type: Object,
      default: () => ({}),
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    isDetail: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['close', 'reload', 'update:modelValue']);

  const title = computed(() => {
    if (props.isDetail) {
      return '商品详情';
    }
    if (props.info.id) {
      return '编辑商品';
    } else {
      return '新增商品';
    }
  });

  const form = ref({});
  const typeFlag = ref(false);
  const loading = ref(false);
  const formInstance = ref();

  const rules = ref({
    name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
    typeName: [{ required: true, message: '请选择商品类型', trigger: 'blur' }],
    // code: [{ required: true, message: '请扫描或输入商品条形码', trigger: 'blur' }],
    total: [{ required: true, message: '请输入商品数量', trigger: 'blur' }],
  });

  watch(
    () => props.modelValue,
    v => {
      if (v) {
        form.value = JSON.parse(JSON.stringify(props.info));
      }
    },
  );

  function goBack() {
    emits('close');
  }

  function changeModelValue(v) {
    emits('update:modelValue', v);
  }

  function closeDialog() {
    changeModelValue(false);
  }

  async function save() {
    const callback = props.info.id ? updateShop : addShop;
    formInstance.value.validate(async vaild => {
      if (vaild) {
        loading.value = true;
        const data = { ...form.value };
        try {
          const res = await callback(data);
          if (res.code == 200) {
            ElMessage.success('操作成功');
            emits('reload');
            emits('close');
          }
        } catch (error) {
        } finally {
          loading.value = false;
        }
      } else {
        return false;
      }
    });
  }

  function openType() {
    typeFlag.value = true;
  }

  function confirmType(val) {
    console.log(val, 'callback');
    const { name, id } = val;
    form.value.typeName = name;
    form.value.typeId = id;
  }

  /**重置表单校验 */
  function resetFields() {
    formInstance.value.resetFields();
  }

  onMounted(() => {
    if (props.info.id) {
      form.value = JSON.parse(JSON.stringify(props.info));
    }
  });
</script>

<style lang="scss" scoped>
  .edit {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: #212121;
    border-radius: 5px;
    padding: 20px;
  }

  ::v-deep(.el-input.is-disabled .el-input__inner) {
    color: #ff5722 !important; // 修改为你想要的颜色，例如橙色
  }
</style>
